<script setup lang="ts">
import { computed } from 'vue'
import { ElIcon } from 'element-plus'
import { propTypes } from '@/utils/prop-types'
import { useDesign } from '@/hooks/web/use-design'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('icon')

const props = defineProps({
  // icon name
  icon: propTypes.string,
  // icon color
  color: propTypes.string,
  // icon size
  size: propTypes.number.def(16)
})

const symbolId = computed(() => {
  return `#icon-${props.icon.split('svg-icon:')[1]}`
})
</script>

<template>
  <el-icon :class="prefixCls" :size="size" :color="color">
    <svg v-if="symbolId" aria-hidden="true">
      <use :xlink:href="symbolId || ''" />
    </svg>
  </el-icon>
</template>
